
$control-select-arrow-container-width: 18px;
$control-select-arrow-width: 8px;
$control-select-arrow-height: 8px;

.control-select {
  position: relative; // for arrow
  display: inline-block;
  vertical-align: top; // hack for all controls
}

.control-select__select { // a <select>
  @include control-focus-border;
  @include reset-appearance;
  display: block;
  height: 100%;
  padding: $control-v-padding ($control-select-arrow-container-width + $control-h-padding) $control-v-padding $control-h-padding;
  border: 1px solid $control-border-color;
  border-radius: $border-radius;
  line-height: $control-line-height;
  background: transparent; // for reset
  font-size: $control-font-size; // for reset
  font-family: inherit; // for reset
  color: $control-text-color;

  option {
    padding: 0; // FF has default inner padding
    color: #000; // for IE, so that when expanded, options aren't whited-out
  }
}

.control-select__arrow {
  position: absolute;
  top: 1px;    // for border
  right: 1px;  // "
  bottom: 1px; // "
  width: $control-select-arrow-container-width;
  border-left: 1px solid $control-border-color;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: 0 3px;
  background: $control-fill-color;
  pointer-events: none;

  &:after {
    @include down-triangle($control-select-arrow-width, $control-select-arrow-height, rgba(0, 0, 0, .35));
    @include absolutely-center($control-select-arrow-width, $control-select-arrow-height);
    content: '';
  }
}
